<template>
    <el-form :model="adminForm" label-width="120px">
        <el-form-item label="管理员用户名">
            <el-input v-model="adminForm.adminname" placeholder="请输入（1-6位英文字母）用户名" />
        </el-form-item>
        <el-form-item label="密码">
            <el-input v-model="adminForm.password" placeholder="情输入任意6-18位字符" :show-password="true" type="password" />
        </el-form-item>
        <el-form-item label="管理员权限">
            <el-radio-group v-model="adminForm.role" class="ml-4">
                <el-radio label="1" size="large">超级管理员</el-radio>
                <el-radio label="2" size="large">普通管理员</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="权限选择">
            <el-tree ref="treeRef" :data="data" show-checkbox node-key="id" highlight-current />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
            <el-button type="info" @click="cancelData">取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router"
import { reactive, ref } from 'vue'
import service from '../../../utils/service';
import type { AxiosResponse } from 'axios';
import { ElMessage, ElTree } from "element-plus";
import { menuData as data } from "../../../grants/menuData"
import type { TreeKey } from "element-plus/es/components/tree/src/tree.type"
interface IAdminForm {
    "adminname": string,
    "password": string,
    "role": string,
    "checkedKeys": string[]
}
const adminForm = reactive<IAdminForm>({
    "adminname": '',
    "password": '',
    "role": '',
    "checkedKeys": [],
})

// 组件对象的类型
// 需要解决 
let treeRef = ref<InstanceType<typeof ElTree>>()
const $router = useRouter()

const addAdminData = () => {
    // let arr: TreeKey[] = treeRef.value!.getCheckedKeys()
    // let arrHalf: TreeKey[] = treeRef.value!.getHalfCheckedKeys()
    // adminForm.checkedKeys = arr.concat(arrHalf) as string[]
    service({
        url: `/admin/add`,
        method: "post",
        data: adminForm
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            console.log("res.data.code", res.data.code);
            $router.push("/Home/AdminList")
            ElMessage({
                showClose: true,
                message: "添加成功",
                type: "success"
            })
        } else if (res.data.code === "10004") {
            ElMessage({
                showClose: true,
                message: "该管理员已存在",
                type: "warning"
            })
        }
    })
}

// 添加管理员
const onSubmit = () => {
    let arr: TreeKey[] = treeRef.value!.getCheckedKeys()
    let arrHalf: TreeKey[] = treeRef.value!.getHalfCheckedKeys()
    adminForm.checkedKeys = arr.concat(arrHalf) as string[]
    if (adminForm.adminname && adminForm.password && adminForm.role && adminForm.checkedKeys.length) {
        addAdminData()
    } else {
        ElMessage({
            showClose: true,
            message: "请输入添加管理员的完整信息",
            type: "warning"
        })
    }
}
document.onkeydown = (evt) => {
    let e = evt
    let key = e.code
    if (key == "Enter") {
        onSubmit()
    }
}
// 清空表单数据
const cancelData = () => {
    let key: keyof IAdminForm
    for (key in adminForm) {
        if (adminForm[key] as string) {
            (adminForm[key] as string) = ""
        } else {
            (adminForm[key] as string[]) = []
            treeRef.value!.setCheckedKeys(adminForm[key] as string[])
        }

    }
}
</script>

<style scoped></style>